<template>
  <div class="confirm">
    
    <div class="confirm_shell confirm_info">
      <div class="confirm_shell_subtit">
        <i class="iconfont icon_shell icon-dingdan"></i>
        订单信息
      </div>
      <ul class="confirm_ul">
        <li class="confirm_li" @click="toVehicle">
          <p class="confirm_li_tit">车辆：</p>
          <p class="confirm_li_cont">{{orderInfo.car}}</p>
          <!-- <p class="confirm_li_cont">car</p> -->
          <i class="iconfont icon-arrowright"></i>
        </li>
        <li class="confirm_li" @click="toAddress">
          <p class="confirm_li_tit">地址：</p>
          <p class="confirm_li_cont">{{orderInfo.address}}</p>
          <!-- <p class="confirm_li_cont">address</p> -->
          <i class="iconfont icon-arrowright"></i>
        </li>
        <li class="confirm_li">
          <p class="confirm_li_tit">地址详情：</p>
          <p class="confirm_li_cont">{{orderInfo.address_detail}}</p>
          <!-- <p class="confirm_li_cont">address</p> -->
        </li>
        <li class="confirm_li">
          <p class="confirm_li_tit">联系方式：{{orderInfo.phone}}</p>
          <!-- <p class="confirm_li_tit">联系方式：phone</p> -->
        </li>
        <li class="confirm_li">
          <!-- <p class="confirm_li_tit">小伙伴：{{orderInfo.partner}}</p> -->
          <p class="confirm_li_tit">小伙伴：{{worker.name}}</p>
          <!-- <p class="confirm_li_tit">小伙伴：partner</p> -->
        </li>
        <li class="confirm_li">
          <p class="confirm_li_tit">小伙伴手机号：
            <!-- <a style="color: #5594FF;" :href="'tel:'+orderInfo.worker_phone">{{orderInfo.worker_phone}}</a> -->
            <a style="color: #5594FF;" :href="'tel:'+worker.mobile">{{worker.mobile}}</a>
            <!-- <a :href="'tel:'+13043650005">13043650005</a> -->
          </p>
        </li>
      </ul>
    </div>

    <div class="confirm_shell confirm_time">
      <div class="confirm_shell_subtit">
        <i class="iconfont icon_shell icon-time1"></i>
        服务时间
      </div>
      <ul class="confirm_ul">
        <li class="confirm_li">
          <!-- <p>预约日期：</p> -->
          <!-- <div class="order-list-option"> -->
            <date-picker :date="endTime" :option="option" :limit="limit" v-model="endTime.time"></date-picker>
          <!-- </div> -->
          <!-- <i class="iconfont icon-arrowright"></i> -->
        </li>
        <li class="confirm_li" @click="appoint">
          <p>预约时间：{{appointTime}}</p>
          <!-- <p>预约时间：time</p> -->
          <i class="iconfont icon-arrowright"></i>
        </li>
      </ul>
    </div>

    <div class="confirm_shell confirm_mothod">
      <div class="confirm_shell_subtit">
        <i class="iconfont icon_shell icon-zhifu1"></i>
        支付方式
      </div>
      <ul class="confirm_ul">
        <!-- <li class="confirm_li" @click="toCoupon">
          <p>优惠券</p>
          <p>
            <span class="confirm_coupon">0张可用</span>
            <i class="iconfont icon-arrowright"></i>
          </p>
        </li>
        <li class="confirm_li" @click="toMembercard">
          <p>次卡：1<span class="confirm_frequency">(剩1次，共1次)</span></p>
          <i class="iconfont icon-arrowright"></i>
        </li> -->
        <li v-for="(item,index) in orderMethods" :class="[item.id == orderPick?'confirm_li':'confirm_li confirm_li_color']" v-if="item.appear == 1">
          <label v-bind:for="item.id">
            {{item.name}}
            <span v-if="item.isshow == 0">&nbsp;&nbsp;（¥{{item.surplus}}）</span>
            <span v-if="item.isshow == 1">{{item.classify}} （剩{{item.surplus}}次 共{{item.all}}次）</span>
          </label>
          <input type="radio" v-bind:id="item.id" v-bind:value="item.id" v-model="orderPick">
        </li>
        <li class="confirm_li" v-if="orderPick == 0 || orderPick == 2" @click="openCoupon">
          <p>优惠券</p>
          <p>
            <span class="confirm_coupon" v-if="orderCouponId == 0">{{orderCouponLength}}张可用</span>
            <span class="confirm_coupon" v-if="orderCouponId != 0">- {{orderCouponMoney}} 元</span>
            <i class="iconfont icon-arrowright"></i>
          </p>
        </li>


        <li class="confirm_li confirm_li_color" v-if="orderPick == 1">
          <p>优惠券</p>
          <p style="padding-right: 1rem;">次卡与优惠券不能同时使用</p>
        </li>

      </ul>
    </div>

    <div class="confirm_buy">
      <div class="confirm_buy_subtit">合计</div>
      <div class="confirm_buy_all">
        <p>总需支付：<span>{{orderInfo.total}}元</span></p>
        <!-- <p>总需支付：<span>total元</span></p> -->
      </div>
      <button class="confirm_btn" @click="payBefore">立即支付</button>
      <!-- <button class="confirm_btn">立即支付</button> -->
    </div>

    <!-- 选择时间 -->
    <div class="select_time_bg" v-if="isSelectTiming" @click="closeTime"></div>
    <div class="select_time" v-if="isSelectTiming">
      <happy-scroll size="0">
        <div class="pick flex" v-if="startTime.time == endTime.time">
          <button v-for="(item,index) in allTime" v-if="firstTimePage <= index & index <= endTimePage & nowPage < index" :class="[item.num == appointTime?'time timed':'time']" @click.stop="selectTime(index)">{{item.num}}</button>
        </div>
        <div class="pick flex" v-if="startTime.time != endTime.time">
          <button v-for="(item,index) in allTime" v-if="firstTimePage <= index & index <= endTimePage" :class="[item.num == appointTime?'time timed':'time']" @click.stop="selectTime(index)">{{item.num}}</button>
        </div>
      </happy-scroll>
    </div>

    <!-- 支付提醒 -->
    <div class="alert_out" v-if="isInfoSure"></div>
    <div class="alert" v-if="isInfoSure">
      <p class="alert_tit">请确认您的订单信息是否正确</p>
      <div class="alert_cont">
        <p>车辆：{{orderInfo.car}}</p>
        <p>地址：{{orderInfo.address}}</p>
        <p>地址详情：{{orderInfo.address_detail}}</p>
        <p>手机号：{{orderInfo.phone}}</p>
        <p>预约日期：{{endTime.time}}</p>
        <p>预约时间：{{appointTime}}</p>
      </div>
      <div class="alert_btn flex">
        <button @click="payBack">修改</button>
        <button @click="pay">确定</button>
      </div>
    </div>

    <!-- 选择优惠券 -->
    <div class="coupon_out" v-if="isCouponSure" @click="closeCoupon"></div>
    <div class="coupon" v-if="isCouponSure" @click="closeCoupon">
      <happy-scroll size="0">
        <ul>
          <li class="list" v-for="(item,index) in orderCoupon" @click.stop="chooseCoupon(item.id,item.type,item.rate,item.reduce_money)">
            
            <div class="list_part list_part1 flex">
              <p class="list_name" v-if="item.type == 0">满减券</p>
              <p class="list_name" v-if="item.type == 1">任意抵扣券</p>
              <p>点击使用</p>
              <p class="list_price">{{item.reduce_money}}元</p>
            </div>

            <div class="list_part list_part2 flex">
              <p class="list_from">{{item.content}}</p>
              <p class="list_condition" v-if="item.type == 0">消费满{{item.limit_money}}元可使用</p>
              <p class="list_condition" v-if="item.type == 1">可抵扣任意消费</p>
            </div>

            <div class="list_part list_part3 flex">
              <p class="list_begin">{{item.addtime}}</p>
              <p class="list_end">有效期至：{{item.validity}}</p>
            </div>

          </li>

        
            
            <div class="list" style="padding: 0.6rem 1rem;box-sizing: border-box;" @click.stop="chooseCoupon(0)">
                  暂不使用优惠券
            </div>

      
   



        </ul>
      </happy-scroll>
    </div>
  </div>
</template>

<script>
// import date from '@/components/common/Date'
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
import Datepicker from 'vue-datepicker/vue-datepicker-es6.vue';
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
let moment = require('moment');
export default {
  name: "partner",
  data () {
    return {
      // 下面的是预约日期
      startTime: {
        time: '',//今天
      },
      endTime: {
        time: '',//选择日期
      },
      option: {
        type: 'day',
        week: ['一', '二', '三', '四', '五', '六', '日'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        format: 'YYYY-MM-DD',
        placeholder: 'when?',
        inputStyle: {
          'display': 'inline-block',
          'padding': '0px',
          'font-size': '0.95rem',
          'border': '0px solid #fff',
          'border-radius': '2px',
          'color': '#5F5F5F',
          'width': '100%'
        },
        color: {
          header: '#ccc',
          headerText: '#f00',
        },
        buttons: {
          ok: '确定',
          cancel: '取消',
        },
        overlayOpacity: 0.5,
        dismissible: true,
      },
      timeoption: {
        type: 'min',
        week: ['一', '二', '三', '四', '五', '六', '日'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        format: 'YYYY-MM-DD HH:mm'
      },
      multiOption: {
        type: 'multi-day',
        week: ['一', '二', '三', '四', '五', '六', '日'],
        month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        format:"YYYY-MM-DD HH:mm"
      },
      limit: [
        {
          type: Array,
          default:function _default(){
            return [];
          },
        },
        {
          type: 'fromto',
          from: '2018-07-01',
          to: ''
        }
      ],
      // 下面的是预约时间
      appointTime: '',
      isSelectTiming: false,
      firstTimePage: '14',
      endTimePage: '40',
      nowPage: '',
      now: '',
      hours: '',
      minute: '',
      week: '',
      allTime: [
        {id: '0',num: '00:00',},{id: '1',num: '00:30',},
        {id: '2',num: '01:00',},{id: '3',num: '01:30',},
        {id: '4',num: '02:00',},{id: '5',num: '02:30',},
        {id: '6',num: '03:00',},{id: '7',num: '03:30',},
        {id: '8',num: '04:00',},{id: '9',num: '04:30',},
        {id: '10',num: '05:00',},{id: '11',num: '05:30',},
        {id: '12',num: '06:00',},{id: '13',num: '06:30',},
        {id: '14',num: '07:00',},{id: '15',num: '07:30',},
        {id: '16',num: '08:00',},{id: '17',num: '08:30',},
        {id: '18',num: '09:00',},{id: '19',num: '09:30',},
        {id: '20',num: '10:00',},{id: '21',num: '10:30',},
        {id: '22',num: '11:00',},{id: '23',num: '11:30',},
        {id: '24',num: '12:00',},{id: '25',num: '12:30',},
        {id: '26',num: '13:00',},{id: '27',num: '13:30',},
        {id: '28',num: '14:00',},{id: '29',num: '14:30',},
        {id: '30',num: '15:00',},{id: '31',num: '15:30',},
        {id: '32',num: '16:00',},{id: '33',num: '16:30',},
        {id: '34',num: '17:00',},{id: '35',num: '17:30',},
        {id: '36',num: '18:00',},{id: '37',num: '18:30',},
        {id: '38',num: '19:00',},{id: '39',num: '19:30',},
        {id: '40',num: '20:00',},{id: '41',num: '20:30',},
        {id: '42',num: '21:00',},{id: '43',num: '21:30',},
        {id: '44',num: '22:00',},{id: '45',num: '22:30',},
        {id: '46',num: '23:00',},{id: '47',num: '23:30',},
      ],
      // 下面的是订单信息
      orderInfo: {
        car: '',
        address: '',
        address_detail: '',
        phone: '',
        partner: '',
        worker_phone: '',
        total: '',
      },
      // 总支付的信息
      totalPay: {
        all: '0.00',
        reduce: '0.00',
        none: '0.00',
      },
      //支付提醒
      isInfoSure: false,
      // worker
      worker: {},
      // 下面是支付方式
      orderPick: '0',
      orderMethods: [
        {id: '0',uid: '0',pay_type: '1',name: '余额',appear: '1',isshow: '0',classify: '',surplus: '0.00',all: '',},
        {id: '1',uid: '0',pay_type: '4',name: '次卡：',appear: '0',isshow: '1',classify: '',surplus: '0',all: '0',},
        {id: '2',uid: '0',pay_type: '2',name: '微信',appear: '1',isshow: '2',classify: '',surplus: '',all: '',},
      ],
      orderCard: [],
      orderCouponId: '0',
      orderCouponMoney: '0.00',
      orderCoupon: [],
      orderCouponLength: '0',
      isCouponSure:false,  //选择优惠券
    }
  },
  mounted() {
    var that = this;
    var workerUid = that.$root.getUrlStr('wid');
    var serviceScope = that.$root.getUrlStr('service');
    // alert(window.location.href);
    // alert(workerUid);
    // alert(serviceScope);

    that.getTime();
    that.getWorker(workerUid);
    that.getInfo(workerUid,serviceScope);
    that.$root.share();

    // console.log(";;;;;;;;;;;;;;;;;;;");
    // console.log(that.$root.getUrlStr('wid'));
    // console.log(this.$root.getUrlStr('wname'));
    // console.log(this.$root.getUrlStr('wphone'));
  },
  beforeUpdate(){
    
  },
  updated(){

    this.orderInfo.car = global.order.car.name + ' ' + global.order.car.models + ' ' + global.order.car.type + ' ' + global.order.car.num;
    this.orderInfo.address = global.order.addr.addr;
    this.orderInfo.address_detail = global.order.addr.addr_detail;
    this.orderInfo.phone = global.order.addr.mobile;

  },
  components: {
    // 'my-date': date,
    'happy-scroll': HappyScroll,
    'date-picker': Datepicker
  },
  watch: {
    'endTime.time':{
      handler(newVal, oldVal){
        var that = this;
        if (newVal == that.startTime.time) {
          var page = that.nowPage;
          that.appointTime = that.allTime[page+1].num;
        }
      },
      // immediate: true,
      deep: true,
    },
    orderPick(newVal,oldVal){
      console.log(newVal);
      console.log(oldVal);
      var that = this;
      if (newVal != oldVal) {
        if (newVal == 1) {
          that.orderInfo.total = that.totalPay.none;
        } else {
          that.orderInfo.total = that.totalPay.reduce;
        }
      }
    }
  },
  methods: {
    // 下面的是预约日期
    getTime(){
      let week = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      // 下面的是日期的
      this.startTime.time = moment().format("YYYY-MM-DD");
      this.endTime.time = moment().format("YYYY-MM-DD");
      this.limit[1].from = moment(Date.now() - 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
      // 下面的是时间的
      this.now = moment().add('hours',1).format("HH:mm")
      this.hours = moment().add('hours',1).format("HH")
      this.minute = moment().add('hours',1).format("mm")
      this.week = week[moment().format("d")]

      var that = this;
      var page;
      console.log("getTime");
      if (that.minute >= 30) {
        // page = that.hours*2+1;
        // that.nowPage = that.hours*2+1;
        page = that.hours*2;
        that.nowPage = that.hours*2;
      } else {
        // page = that.hours*2;
        // that.nowPage = that.hours*2;
        page = that.hours*2-1;
        that.nowPage = that.hours*2-1;
      }

      if (that.nowPage+2 > that.endTimePage) {
        that.limit[1].from = moment(Date.now() + 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
        that.endTime.time = moment(Date.now() + 24 * 60 * 60 * 1000).format("YYYY-MM-DD");
        page = 13;
      }

      that.appointTime = that.allTime[page+1].num;
    },

    // 获取信息——订单预览
    getInfo(index,serviced){

      var that = this;

      axios.get(global.api.order.customer.preview,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          car_id: sessionStorage.getItem('carId'),
          address_id: sessionStorage.getItem('addrId'),
          worker_uid: index,
          service: serviced,
        }
      })
      .then(function(res){

        console.log(res.data);

        if (res.data.error == 1) {
          alert(res.data.msg);
          that.toVehicle();
        } else {

          if (res.data.car_info.car_type == false){
            that.orderInfo.car = "请选择车辆信息";
          } else if (global.order.first) {
            global.order.car.id = res.data.car_info.id;
            global.order.car.name = res.data.car_info.car_name;
            global.order.car.models = res.data.car_info.car_models;
            global.order.car.type = res.data.car_info.car_type;
            global.order.car.num = res.data.car_info.car_num;
          }

          if (res.data.address_info == false){
            that.orderInfo.address = "请选择地址信息";
            that.orderInfo.phone = "暂无";
          }else if(global.order.first) {
            global.order.addr.id = res.data.address_info.id ;
            global.order.addr.addr = res.data.address_info.addr ;
            global.order.addr.addr_detail = res.data.address_info.addr_detail ;
            global.order.addr.mobile = res.data.address_info.user_mobile;
            global.order.addr.lat = res.data.address_info.latitude;
            global.order.addr.lng = res.data.address_info.longitude;
          }

          if (res.data.goods_info == false) {
            that.orderInfo.total = global.order.all_pay;
            that.totalPay.all = global.order.all_pay;
            that.totalPay.reduce = global.order.all_pay;
          } else {
            that.orderInfo.total = res.data.goods_info.productprice;
            that.totalPay.all = res.data.goods_info.productprice;
            that.totalPay.reduce = res.data.goods_info.productprice;
          }

          global.order.first = false;

          // 支付方式
          that.orderMethods[0].surplus = res.data.balance;
          that.orderCard = res.data.oneCardList;
          that.orderCoupon = res.data.couponList;
          that.orderCouponLength = res.data.couponList.length;
          console.log(res.data.oneCardList.length);

          for (var i=0;i<res.data.oneCardList.length;i++) {
            if (res.data.oneCardList[i].available == 1) {
              that.orderMethods[1].uid = res.data.oneCardList[i].id;
              that.orderMethods[1].appear = '1';
              that.orderMethods[1].classify = res.data.oneCardList[i].title;
              that.orderMethods[1].surplus = res.data.oneCardList[i].number;
              that.orderMethods[1].all = res.data.oneCardList[i].total_number;
            }
          }

          // 赋值到本地
          if (global.order.car.id != 0) {
            that.orderInfo.car = global.order.car.name + ' ' + global.order.car.models + ' ' + global.order.car.type + ' ' + global.order.car.num;
          }

          if (global.order.addr.id != 0) {
            that.orderInfo.address = global.order.addr.addr;
            that.orderInfo.address_detail = global.order.addr.addr_detail;
            that.orderInfo.phone = global.order.addr.mobile;          
          }           
        }
        

      })
      .catch(function(res){
        console.log("preview catch");
        console.log(res);
      })
    },
    // 下面的是重新选择地址和车辆
    toVehicle(){
      this.$router.push({path:'/vehicle'})
    },
    toAddress(){
      this.$router.push({path:'/address'})
    },
    //  下面的是选择预约时间
    appoint(){
      this.isSelectTiming = true;
    },
    closeTime(){
      this.isSelectTiming = false;
    },
    selectTime(index){
      console.log(index);
      this.isSelectTiming = false;
      this.appointTime = this.allTime[index].num;
    },
    // 下面的是支付
    payBefore(){
      if (global.order.car.id == 0) {
        alert("请选择车辆信息");
      } else if (global.order.addr.id == 0) {
        alert("请选择地址信息");
      } else {
        this.isInfoSure = true;
      }
    },
    payBack(){
      this.isInfoSure = false;
    },
    pay () {
      var that = this;
      that.isInfoSure = false;

      // 选择支付方式
      var i = that.orderPick;
      var payType = that.orderMethods[i].pay_type;
      var couponId = "0";
      var oneCardId = "0";
      // var couponId = that.orderCouponId;
      // var oneCardId = that.orderMethods[1].uid;

      if (payType == 1 || payType == 2) {

        couponId = that.orderCouponId;
        oneCardId = "0";

      } else if (payType == 4) {

        couponId = "0";
        oneCardId = that.orderMethods[1].uid

      }

      
      axios.get(global.api.order.customer.add,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          car_id: global.order.car.id,
          address_id: global.order.addr.id,
          // worker_uid: global.order.worker.id,
          worker_uid: that.worker.uid,
          meal_date: that.endTime.time,
          meal_time: that.appointTime,
          pay_type: payType,
          coupon_id: couponId,
          onecard_id: oneCardId,
          service: this.$root.getUrlStr('service'),
          lat: global.order.addr.lat,
          lng: global.order.addr.lng,
        }
      })
      .then(function(res){
        console.log("pay then");
        console.log(res);
        if (res.data.msg == 'success') {
          location.href = "/app/index.php?i=2&c=entryApi&m=yimi_car&do=order&op=orderPay&uuid="+localStorage.getItem('carWashUuid')+"&orderid="+res.data.order_id
        } else {
          alert(res.data.msg);
        }
      })
      .catch(function(res){
        console.log("pay catch");
        console.log(res);
      })
    },
    getWorker(index){
      console.log("getWorker");
      var that = this;
      axios.get(global.api.index.search,{  //按距离
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          soft: 0,
        }
      })
      .then(function(res){
        console.log("getWorker then");
        console.log(res);
        var list = res.data.data;
        for (var i = 0;i<list.length;i++) {
          console.log(index);
          console.log(list[i].uid);
          if (index == list[i].uid) {
            that.worker = list[i];
          }
        }
      })
      .catch(function(res){
        console.log("getWorker catch");
        console.log(res);
      })
    },

    // 下面的是支付方式（优惠券、次卡）
    // toCoupon(){
    //   this.$router.push({path:'/coupon'})
    // },
    
    // toMemberCard(){
    //   this.$router.push({path:'/membercard'})
    // },
    openCoupon(){
      this.isCouponSure = true;
    },

    closeCoupon(){
      this.isCouponSure = false;
    },

    chooseCoupon(id,type,rate,reduce){

      console.log(id);

      var that = this;

      that.orderCouponId = id;

      if(id == 0){

        that.orderInfo.total = that.totalPay.all;

      }else{
        
        if (type == 0) {

          that.orderCouponMoney = reduce;

          if (Number(that.totalPay.all) <= Number(reduce)) {


            that.orderInfo.total = "0.00";
            that.totalPay.reduce = "0.00";

          } else {

            
            var alltotal = Number(that.totalPay.all) - Number(reduce);

            that.orderInfo.total = alltotal.toFixed(2);
            that.totalPay.reduce = alltotal.toFixed(2);

          }

        } else if (type == 1) {

       
          var alltotal = that.totalPay.all*rate/100;

          that.orderInfo.total = alltotal.toFixed(2);
          that.totalPay.reduce = alltotal.toFixed(2);

          var orderCouponMoney = that.totalPay.all*(100 - Number(rate))/100;
          that.orderCouponMoney = orderCouponMoney;

        }

     
      }

       that.isCouponSure = false;

    },
  },
}
</script>
  
<style scoped>
  button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .confirm{
    text-align: left;
    position: relative;
  }
  .confirm_shell{
    width: 100%;
    margin: 1.2rem auto;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .confirm_info{
    margin-top: 0.6rem;
  }
  .confirm_shell_subtit{
    line-height: 2rem;
    margin-top: 0.5rem;
    color: #2ecc80;
    font-size: 1rem;
    width: 92%;
    margin: 0 auto;
  }
  .confirm_shell_subtit i{

  }
  .confirm_ul{
    width: 92%;
    margin: 0 auto;
  }
  .confirm_ul .confirm_li{
    /*line-height: 2.8rem;*/
    border-bottom: 1px solid #B3B3B4;
    padding: 0.8rem 0 0.8rem 1rem;
    font-size: 0.95rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #595757;
  }

  .confirm_ul .confirm_li_color{
    color: rgba(0,0,0,0.4);
  }
  .confirm_li_tit{
    line-height: 1.2rem;
  }
  .confirm_li_tit a{
    color: #595757;
    text-decoration: none;
  }
  .confirm_li_cont{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: left;
    line-height: 1.2rem;
  }
  .confirm_ul li:last-child{
    border-bottom: none;
  }
  /*.confirm_ul li input{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    border: none;
    font-size: 0.95rem;
  }*/
  .confirm_ul li input:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .confirm_coupon{
    font-size: 0.85rem;
    color: #2ecc80;
  }
  .confirm_frequency{
    font-size: 0.8rem;
  }

  /*合计*/
  .confirm_buy{
    /*width: 90%;*/
    /*width: 100%;*/
    padding: 0 5%;
    background-color: #fff;
  }
  .confirm_buy_subtit{
    line-height: 3.8rem;
    border-bottom: 1px solid #B3B3B4;
    font-size: 1.1rem;
    color: #2ecc80;
    padding-left: 1rem;
  }
  .confirm_buy_all{
    line-height: 4.3rem;
    padding-left: 1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .confirm_buy_all span{
    font-size: 1.3rem;
  }
  .confirm_using{
    font-size: 0.8rem;
    color: #888888;
  }
  .confirm_btn{
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #19C674;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    margin: 1rem 0;
    font-size: 0.95rem;
  }
  .confirm_btn:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  /*修改弹出的日期*/
  .order-list-option{
    /*-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    line-height: 1.3rem;*/
    width: 100%;
  }
  /* 下面的是选择时间的css样式 */
  .select_time_bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
  }
  .select_time{
    width: 100%;
    height: 9.5rem;
    position: fixed;
    top: 50%;
    left: 0;
    margin-top: -4.75rem;
    z-index: 101;
  }
  .pick{
    flex-wrap: wrap;
    width: 100%;
  }
  .time{
    width: 24.25%;
    height: 3rem;
    line-height: 3rem;
    box-sizing: border-box;
    border: 1px solid #2ecc80;
    background-color: #fff;
    margin-right: 1%;
    margin-bottom: 0.25rem;
    font-size: 1rem;
  }
  .time:nth-child(4n){
    margin-right: 0;
  }
  .timed{
    background: #fff url(/assets/img/dagou_weici2_icon.png) no-repeat right bottom;
  }
  /* 下面的是支付提醒 */
  .alert_out{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
  }
  .alert{
    width: 90%;
    /*height: 12rem;*/
    position: fixed;
    top: 50%;
    left: 5%;
    margin-top: -8rem;
    z-index: 101;
    background-color: #fff;
    border-radius: 0.5rem;
  }
  .alert_tit{
    text-align: center;
    font-size: 0.9rem;
    height: 2rem;
    line-height: 2rem;
    margin-top: 1rem;
  }
  .alert_cont{
    font-size: 0.85rem;
    text-align: left;
    /*height: 8rem;*/
  }
  .alert_cont p {
    line-height: 2rem;
    padding: 0 1rem;
  }
  .alert_btn{
    justify-content: space-between;
    align-items: center;
    height: 2rem;
    width: 100%;
  }
  .alert_btn button{
    /*width: 6rem;*/
    flex: 1;
    height: 2rem;
    border: 0px solid red;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border-radius: 0.5rem;
  }
  .alert_btn button:first-child{
    border-right: 1px solid #fff;
  }
  .datepickbox p{
    display: block;
  }
  .datepickbox i{
    display: block;
  }
  /*下面选择优惠券*/
  .coupon_out{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
  }
  .coupon{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
  }
  .coupon .list{
    width: 94%;
    margin: 1rem 3%;
    background-color: #fff;
    border-radius: 0.3rem;
    position: relative;
  }
  .coupon .list_part{
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 5%;
    padding: 0.5rem 0%;
    text-align: left;
  }
  .coupon .list_part2{
    border-bottom: 1px dashed #B3B3B4;
    line-height: 1rem;
  }
  .coupon .list_part3{
    line-height: 1rem;
  }
  .coupon .list_name{
    font-size: 1.1rem;
    /*padding-left: 0.8rem;*/
  }
  .coupon .list_price{
    font-size: 1.6rem;
    color: #2ecc80;
  }
  .coupon .list_from{
    font-size: 0.8rem;
    /*padding-left: 0.8rem;*/
  }
  .coupon .list_condition{
    font-size: 0.8rem;
  }
  .coupon .list_begin{
    font-size: 0.8rem;
    /*padding-left: 0.8rem;*/
    color: #8A8A8A;
  }
  .coupon .list_end{
    font-size: 0.8rem;
  }
  .coupon .list_img{
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: -0.6rem;
    left: 65%;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
</style>
